<template>
  <el-card class="page-container" shadow="never">
    <div class="btn-container">
      <el-button type="primary" @click="addComponent" size="small">
        创建部件
      </el-button>
    </div>
    <el-table
      ref="mainTable"
      v-loading="tableLoading"
      :data="tableData"
      row-key="id"
      border
      height="100%"
    >
      <el-table-column prop="component_name" label="部件名称" />
      <el-table-column prop="component_code" label="部件编码" />
      <el-table-column prop="component_type" label="部件类型" />
      <el-table-column prop="component_category" label="所属分类" />
      <el-table-column prop="specification_model" label="规格型号" />
      <el-table-column prop="specifications" label="技术规格" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewComponent(scope.row)">
            详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="modifyComponent(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteComponent(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <my-dialog
      ref="dialog"
      v-if="showDialogFlag"
      @close="onDialogClose"
    ></my-dialog>
  </el-card>
</template>
<script>
import MyDialog from "./dialog.vue";
import ComponentService from "@/api/component";

export default {
  name: "demo-1",
  components: {
    MyDialog,
  },
  data() {
    return {
      showDialogFlag: false, // 对话框是否可见
      tableData: [], // 表格数据
      tableLoading: false, // 表格加载状态
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 添加部件
    addComponent() {
      this.showDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.dialog.dialogVisible = true;
        this.$refs.dialog.initAddComponent();
      });
    },
    // 删除部件
    deleteComponent(row) {
      this.$confirm("该操作会删除部件，确认要继续操作吗？", "请确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ComponentService.deleteComponent({
            id: row.id,
          }).then(async (res) => {
            let data = await res.json();
            if (data.code === 200) {
              this.$notify.success({
                message: "删除成功",
                title: "操作提示",
              });
              this.getTableData();
            } else {
              this.$notify.error({
                title: "删除失败",
                message: data.message || "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$notify.info({
            message: "删除操作已取消",
            title: "操作提示",
          });
        });
    },
    // 编辑部件
    modifyComponent(row) {
      console.log(row);
      this.showDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.dialog.dialogVisible = true;
        this.$refs.dialog.initModifyComponent(row);
      });
    },
    // 查看部件详情
    viewComponent(row) {
      this.showDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.dialog.dialogVisible = true;
        this.$refs.dialog.initViewComponent(row);
      });
    },
    /**
     * 对话框关闭时调用
     * @param flg 是否刷新表格数据
     */
    onDialogClose(flg) {
      this.showDialogFlag = false;
      if (flg) {
        this.getTableData();
      }
    },
    getTableData() {
      this.tableLoading = true;
      ComponentService.getComponent().then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.tableLoading = false;
          this.tableData = data.result;
        }
      });
    },
  },
};
</script>
<style scoped>
.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.btn-container {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
:deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
</style>
